/*
定义组件使用inheritAttrs:false 和 v-bind="$attrs"可以让外部传入的class加到自己想要的dom元素上，vue文档如下
https://vuejs.org/guide/components/attrs.html#attribute-inheritance
<style scoped>是给css增加[data-v-xxxx]选择器，给组件内所有dom元素增加data-v-xxxx属性
当组件内引用其它组件时，会将组件自身data-v-xxxx也加给引用的组件的"根元素"上
所以使用了inheritAttrs:false 和 v-bind="$attrs"将传递的class绑给子组件的"非根元素"时
父组件传递的class并不生效
简单总结就是，v-bind="$attrs"和<style scoped>冲突

解决方案：在创建组件前，将scopeId手动加入attrs，随后组件生成$attrs就自带scopeId了
P.S. VUE源码中，对于开发环境，$attrs添加的scopeId被删掉了导致效果不正确，正式环境是可以的
解决方案1：找到VUE源码，node_modules\@vue\runtime-core\dist\runtime-core.esm-bundler.js，注释掉delete attrs[key];即可
解决方案2：process.env.NODE_ENV使用production，修改package.json -> scripts -> serve改为NODE_ENV=production vue-cli-service serve
解决方案3: 使用computed属性__attrs获得同样的绑定效果且绕过vue的BUG
 */
export default {
  inheritAttrs: false,
  beforeCreate() {
    if (this.$.vnode.scopeId)
      this.$.attrs[this.$.vnode.scopeId] = "";
  },
  computed: {
    /** 还有其它不需要继承$attrs但也需要scopeId的元素可以v-bind使用 */
    scopeId() {
      const attrs = {};
      attrs[this.$.vnode.scopeId] = "";
      return attrs;
    },
    __attrs() {
      if (process.env.NODE_ENV === 'production' || !this.$.vnode.scopeId)
        return this.$attrs;
      else {
        const attrs = { ...this.$attrs };
        attrs[this.$.vnode.scopeId] = "";
        return attrs;
      }
    }
  },
}